<template>
	<view>

		<view class="head">
			<view>内网云报账</view>
			<view>清爽 便捷 易懂</view>
		</view>

		<view class="login_main">
			<image class="icontips" src="../../static/images/login_icon1.png" mode="widthFix"></image>
			<uni-segmented-control class='m-b-60' :current="current" :values="items" @clickItem="onClickItem"
				styleType="text" activeColor="#007aff"></uni-segmented-control>
			<view>
				<view v-show="current===0">
					<!-- 登录表单 -->
					<uni-forms ref="login" :modelValue="login" :rules="rules" label-position="left">
						<uni-forms-item name="username">
							<uni-easyinput :styles='iptStyles' type="text" v-model="login.username"
								placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item name="password">
							<uni-easyinput :styles='iptStyles' type="password" v-model="login.password"
								placeholder="请输入密码" />
						</uni-forms-item>
					</uni-forms>
					<button class="btn" @click="loginFun">登录</button>
					<view class="tac">
						<text @click="current = 1" class="tips  lh-68">没有账号? 去注册</text>
					</view>
				</view>
				<view v-show="current===1">
					<!-- 注册注册表单 -->
					<uni-forms ref="reglogin" :modelValue="reglogin" :rules="rules" label-position="left">
						<uni-forms-item name="username">
							<uni-easyinput :styles='iptStyles' type="text" v-model="reglogin.username"
								placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item name="password">
							<uni-easyinput :styles='iptStyles' type="password" v-model="reglogin.password"
								placeholder="请输入密码" />
						</uni-forms-item>
					</uni-forms>
					<button class="btn" @click="regLoginFun">注册</button>
					<view class="tac">
						<text @click="current = 0" class="tips  lh-68">已注册? 去登录</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tac m-t-100">登录代表你已经同意用户 <uni-link color="#f14e4e" href="https://gitee.com/yanjianhang/bill.git" text="《用户协议》"></uni-link></view>
		
		<uni-popup ref="popup" type="message">
			<uni-popup-message type="success" :message="upMsg" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['登录', '注册'],
				current: 0,
				login: {
					username: '',
					password: ''
				},
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}]

					}
				},
				iptStyles: {
					color: '#70a5ed',
					fontSize: '32upx'
				},
				reglogin: {
					username: '',
					password: ''
				},
				upMsg:''
			}
		},
		onLoad() {
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			loginFun() {
				this.$refs.login.validate().then(res => {
					this.$http.post('/my/login', this.login).then(res => {
						this.upMsg = '登录成功'
						this.$refs.popup.open('top')
						uni.setStorageSync('token', res.data.token)
						uni.switchTab({
							url:'/pages/index/index'
						})
					})
				})
			},
			regLoginFun() {
				this.$refs.reglogin.validate().then(res => {
					this.$http.post('/my/reglogin', this.reglogin).then(res => {
						this.upMsg = '注册成功! 去登陆'
						this.login = Object.assign(this.login,this.reglogin)
						this.$refs.reglogin.resetFields()
						this.current = 0
						this.$refs.popup.open('top')
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.head {
		height: 640upx;
		background: url('@/static/images/login.png') no-repeat left bottom;
		background-size: cover;
		display: flex;
		flex-direction: column;
		padding-left: 60upx;
		padding-top: 100upx;
		
		view {
			color: white;
		}

		view:first-child {
			font-size: 67upx;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
			font-family: 'font-siyuan-bold';
		}

		view:last-child {
			font-size: 33upx;

		}
	}

	.login_main {
		position: relative;
		padding: 80upx 50upx 30upx;
		margin: 55upx;
		margin-top: -240upx;
		border-radius: 55upx;
		box-shadow: 1upx 1upx 8upx rgba(0, 0, 0, .8);
		background-color: white;

		.icontips {
			position: absolute;
			width: 200upx;
			right: 10upx;
			top: -110upx;
		}

		.btn {
			background-image: linear-gradient(to right, #7ab2fe, #79b2fe);
			line-height: 85upx;
			box-shadow: 0 4upx 9upx #c1dbfe;
			color: white;
		}

		.tips {
			color: #4493fe;
		}
	}
</style>
